<!-- tab菜单 -->

<template>
  <div class="tab" v-if="route.name == 'home' && showMenuRight">
    <div
      class="header-total"
      v-if="route.name == 'home' || (route.name == 'alert' && animate)"
    >
      <div class="header-total-group">
        <div class="header-total-item eq">
          <div class="icon-box">
            <div class="progress-icon">
              <el-progress
                :width="68"
                type="circle"
                color="#26BEFF"
                :percentage="percentage1"
                status="success"
              >
                <img :src="requireImgUrl('image', '设备总数')" alt="" />
              </el-progress>
            </div>

            <img
              class="outsided"
              :src="requireImgUrl('image', '蓝色外圈')"
              alt=""
            />
          </div>
          <div class="info">
            <div class="title">{{ HomeEquipmentDetailData.title }}</div>
            <div class="number">
              <CountUp :end-val="HomeEquipmentDetailData.total"></CountUp>
            </div>
          </div>
        </div>
        <div class="header-total-item monitor">
          <div class="icon-box">
            <div class="progress-icon">
              <el-progress
                :width="68"
                type="circle"
                color="#35C970"
                :percentage="percentage2"
                status="success"
              >
                <img :src="requireImgUrl('image', '监控')" alt="" />
              </el-progress>
            </div>

            <img
              class="outsided"
              :src="requireImgUrl('image', '绿色外圈')"
              alt=""
            />
          </div>
          <div class="info">
            <div class="title">{{ MonitorDetalData.title }}</div>
            <div class="number">
              <CountUp :end-val="MonitorDetalData.total"></CountUp>
            </div>
          </div>
        </div>
        <div class="header-total-item broadcast">
          <div class="icon-box">
            <div class="progress-icon">
              <el-progress
                :width="68"
                type="circle"
                color="#FFCF26"
                :percentage="percentage3"
                status="success"
              >
                <img :src="requireImgUrl('image', '广播')" alt="" />
              </el-progress>
            </div>
            <img
              class="outsided"
              :src="requireImgUrl('image', '黄色外圈')"
              alt=""
            />
          </div>
          <div class="info">
            <div class="title">{{ BroadcastDetail.title }}</div>
            <div class="number">
              <CountUp :end-val="BroadcastDetail.total"></CountUp>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted } from "vue";
import { useRoute } from "vue-router";
import { requireImgUrl } from "@/utils/localurl/metaUrl";
import { NewGeneral, getEqIDs } from "@/api/screen/equipment";
import { useAnimateStore } from "@/stores/animate";
import { UseTab } from "@/stores/tab";
import { UseLocation } from "@/stores/location";
import { useIds } from "@/stores/screen/ids";

import pLimit from "p-limit";
import { storeToRefs } from "pinia";
import { useAppStore } from "@/stores/modules/app";
const { showMenuRight } = storeToRefs(useAppStore());
const { getsessionStorage } = useIds();
const animatestore = useAnimateStore();
const animate = computed(() => animatestore.$state.Animate);
const tab = UseTab();
const route = useRoute();
const location = UseLocation();
const currentIndex = ref(0);
const percentage1 = ref(0);
const percentage2 = ref(0);
const percentage3 = ref(0);
const HomeEquipmentDetailData = ref({
  title: "设备总数",
  total: 35,
  online: 35,
  outline: 0,
});

const MonitorDetalData = ref({
  title: "监控总数",
  total: 2,
  online: 2,
  outline: 0,
});

const BroadcastDetail = ref({
  title: "广播总数",
  total: 6,
  online: 6,
  outline: 0,
});

// 获取当前位置index
const locationIndex = computed(() => {
  return location.$state.LocationIndex;
});

const getHomeEquipmentDetail = async (config) => {
  HomeEquipmentDetailData.value = {
    title: "设备总数",
    total: 0,
    online: 0,
    outline: 0,
  };
  let res = (await NewGeneral(config)) as any;
  if (res.code == 200) {
    HomeEquipmentDetailData.value.total =
      res.data["HOME_EQUIPMENT_TOTAL"] && res.data["HOME_EQUIPMENT_TOTAL"].data;
    HomeEquipmentDetailData.value.online =
      res.data["ONLINE_EQUIPMENT"] && res.data["ONLINE_EQUIPMENT"].data;
    HomeEquipmentDetailData.value.outline =
      res.data["OFFLINE_EQUIPMENT"] && res.data["OFFLINE_EQUIPMENT"].data;
    percentage1.value =
      (HomeEquipmentDetailData.value.online /
        HomeEquipmentDetailData.value.total) *
      100;
  }
};

const getMonitorDetal = async (config) => {
  MonitorDetalData.value = {
    title: "监控总数",
    total: 0,
    online: 0,
    outline: 0,
  };
  let res = (await NewGeneral(config)) as any;
  if (res.code == 200) {
    MonitorDetalData.value.total =
      res.data["PRIMARY_DEVICE_METRICS_MONITOR_VIDEO"] &&
      res.data["PRIMARY_DEVICE_METRICS_MONITOR_VIDEO"].data;
    MonitorDetalData.value.online =
      res.data["PRIMARY_DEVICE_METRICS_ONLINE"] &&
      res.data["PRIMARY_DEVICE_METRICS_ONLINE"].data;
    MonitorDetalData.value.outline =
      res.data["PRIMARY_DEVICE_METRICS_OFFLINE"] &&
      res.data["PRIMARY_DEVICE_METRICS_OFFLINE"].data;
    percentage2.value =
      (MonitorDetalData.value.online / MonitorDetalData.value.total) * 100;
  }
};

const getBroadcast = async (config) => {
  BroadcastDetail.value = {
    title: "广播总数",
    total: 0,
    online: 0,
    outline: 0,
  };
  let res = (await NewGeneral(config)) as any;
  if (res.code == 200) {
    BroadcastDetail.value.total =
      res.data["BROADCAST_DEVICE_COUNT"] &&
      res.data["BROADCAST_DEVICE_COUNT"].data;
    BroadcastDetail.value.online =
      res.data["BROADCAST_DEVICE_COUNT_ONLINE"] &&
      res.data["BROADCAST_DEVICE_COUNT_ONLINE"].data;
    BroadcastDetail.value.outline =
      res.data["BROADCAST_DEVICE_COUNT_ONLINE"] &&
      res.data["BROADCAST_DEVICE_COUNT_ONLINE"].data;
    percentage3.value =
      (BroadcastDetail.value.online / BroadcastDetail.value.total) * 100;
  }
};
const promise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("接口3获取的数据传递给下一个方法");
    }, 1000);
  });
};
const tabIndex = computed(() => {
  return tab.$state.Tab;
});

watch(
  () => tabIndex.value,
  (newVal) => {
    currentIndex.value = newVal;
  },
  { deep: true, immediate: true }
);

const initData = () => {
  let ids = getsessionStorage();
  //code是怎么对接后端？
  if (ids) {
    const eqconfig = [
      {
        code: "HOME_EQUIPMENT_TOTAL",
        params: {
          equipmentIds: ids,
        },
      },
      {
        code: "ONLINE_EQUIPMENT",
        params: {
          equipmentIds: ids,
        },
      },
      {
        code: "OFFLINE_EQUIPMENT",
        params: {
          equipmentIds: ids,
        },
      },
    ];

    const monitorConfig = [
      {
        code: "PRIMARY_DEVICE_METRICS_MONITOR_VIDEO",
        params: {
          equipmentIds: ids,
        },
      },
      {
        code: "PRIMARY_DEVICE_METRICS_ONLINE",
        params: {
          equipmentIds: ids,
        },
      },
      {
        code: "PRIMARY_DEVICE_METRICS_OFFLINE",
        params: {
          equipmentIds: ids,
        },
      },
    ];

    const broadcastConfig = [
      {
        code: "BROADCAST_DEVICE_COUNT",
        params: {
          equipmentIds: ids,
        },
      },
      {
        code: "BROADCAST_DEVICE_COUNT_ONLINE",
        params: {
          equipmentIds: ids,
        },
      },
      {
        code: "BROADCAST_DEVICE_COUNT_OFFLINE",
        params: {
          equipmentIds: ids,
        },
      },
    ];
    //并发
    const limit = pLimit(1);
    //获取 首页3个统计数据
    const input = [
      limit(() => getHomeEquipmentDetail(eqconfig)),
      limit(() => getMonitorDetal(monitorConfig)),
      limit(() => getBroadcast(broadcastConfig)),
    ];
    Promise.all(input);
  }
};
onMounted(() => {
  // initData();
});
</script>

<style scoped lang="scss">
.tab {
  position: absolute;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3998;

  .header-total {
    width: clamp(63.25rem, 52.71vw, 126.5rem);
    height: clamp(9.125rem, 7.6vw, 18.25rem);
    background: linear-gradient(180deg, rgba(7, 36, 44, 0.38) 0%, #0c3f4d 100%);
    border-radius: 0px 0px 0px 0px;

    .header-total-group {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .header-total-item {
        width: clamp(12.5rem, 10.42vw, 25rem);
        height: clamp(6.875rem, 5.73vw, 13.75rem);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-weight: 600;
        }

        .icon-box {
          width: 96px;
          height: 96px;
          position: relative;

          .progress-icon {
            width: 68px;
            height: 68px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            :deep(.el-progress path:first-child) {
              // 修改进度条背景色
              stroke: rgba(38, 190, 255, 0.4);
            }
          }

          .outsided {
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            transform-origin: center;
            animation: outside 1.5s linear infinite;
          }
        }

        .info {
          width: clamp(6.25rem, 5.21vw, 12.5rem);
          height: 100%;
          color: white;
          font-family: DigitalNumbers;
          font-weight: 400;

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .title {
            font-size: clamp(1.125rem, 0.94vw, 2.25rem);
          }

          .number {
            font-size: clamp(2.25rem, 1.88vw, 4.5rem);
          }
        }

        &.eq {
          .icon-box {
            .progress-icon {
              :deep(.el-progress path:first-child) {
                // 修改进度条背景色
                stroke: rgba(38, 190, 255, 0.4);
              }
            }
          }

          .info {
            .linestatus {
              color: rgba(79, 240, 240, 1);
            }
          }
        }

        &.monitor {
          .icon-box {
            .progress-icon {
              :deep(.el-progress path:first-child) {
                // 修改进度条背景色
                stroke: rgba(53, 201, 112, 0.24);
              }
            }
          }

          .info {
            .linestatus {
              color: rgba(255, 175, 101, 1);
            }
          }
        }

        &.broadcast {
          .icon-box {
            .progress-icon {
              :deep(.el-progress path:first-child) {
                // 修改进度条背景色
                stroke: rgba(255, 207, 38, 0.24);
              }
            }
          }

          .info {
            .linestatus {
              color: rgba(255, 207, 38, 0.24);
            }
          }
        }
      }
    }
  }

  .tab-box {
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 10px;

    .tab-item {
      width: clamp(5rem, 4.17vw, 10rem);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      background-color: rgba(12, 57, 77, 0.6);
      color: rgba(200, 238, 255, 1);
      cursor: pointer;
      font-size: clamp(0.875rem, 0.73vw, 1.75rem);
      height: clamp(2rem, 1.67vw, 4rem);
    }

    .currentTab {
      position: absolute;
      width: clamp(4.5rem, 3.75vw, 9rem);
      height: clamp(2.5rem, 2.08vw, 5rem);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .tab-text {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tab-mak {
      background: url("../../assets/image/tab选中.png") center no-repeat;
      width: clamp(4.5rem, 3.75vw, 9rem);
    }
  }

  @keyframes outside {
    0% {
      transform: translate(-50%, -50%) rotate(0);
    }

    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  // 屏幕大于 1024px 或小于 1440px 时应用该样式
  @media screen and (min-width: 1024px) and (max-width: 1590px) {
    .header-total {
      width: 650px;
    }
  }

  @media screen and (max-width: 1480px) {
    .header-total {
      width: 550px;
    }
  }
}
</style>
